<template>
  <template v-if="comSrc">
    <el-image ref="image" :src="comSrc" v-bind="$attrs" :style="style" :class="classes"
      :preview-src-list="previewSrcList.length ? previewSrcList : preview ? [comSrc] : []" @load="load" :preview-teleported="true">
      <template #error>
        <div class="image-slot">
          <!-- <el-icon> -->
          <!-- <Picture /> -->
          <img style="width: 100%; height:100%;" src="@/assets/images/image-error.png">
          <!-- </el-icon> -->
        </div>
      </template>
    </el-image>
  </template>
  <div class="none-style" :style="{ 'width': `${props.width}px`, 'height': `${props.height}px` }" v-else>
    未上传
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
const props = defineProps({
  src: { type: String, default: '' },
  width: { type: Number, default: 100 },
  height: { type: Number, default: 100 },
  disabled: Boolean,
  preview: {
    type: Boolean, default: true
  },
  previewlist: {
    type: Array, default: []
  },
})
const classes = ref('is--width-full')
const comSrc = computed(() => {
  if (props.src && props.src.indexOf('picture.irobotbox') > -1) {
    return `${props.src}?x-oss-process=image/resize,w_${props.width || 40},h_${props.height || props.width || 40
      }`
  }
  return props.src
})
const style = computed(() => {
  let style = {}
  if (props.width) {
    style.width = props.width + 'px'
  }
  if (props.height) {
    style.height = props.height + 'px'
  }
  style.borderRadius = '4px';
  return style
})

const previewSrcList = computed(() => {
  return props.previewlist || []
})

const load = (e) => {
  const { target } = e
  const width = target.offsetWidth
  const height = target.offsetHeight
  if (width < height) classes.value = 'is--height-full'
}
</script>

<style lang="scss" scoped>
.el-image {
  border: 1px solid #F0F0F0;
  .el-image__wrapper {
    .image-slot {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.is--width-full {

  .el-image__inner,
  .el-image__placeholder,
  .el-image__error {
    width: 100%;
    height: auto;
  }
}

.is--height-full {

  .el-image__inner,
  .el-image__placeholder,
  .el-image__error {
    width: auto;
    height: 100%;
  }
}

.el-image__wrapper {
  display: flex;
  justify-content: center;
  justify-content: center;
}

.none-style {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #D1D1D1;
  background-color: #F0F0F0;
  font-size: 12px;
  border-radius: 8px;
}
</style>
